<template>
  <div class="dialog-container">
    <el-dialog
      width="70%"
      :model-value="dialogTableVisible"
      @close="closeDialog"
      :title="dialogName"
      append-to-body
      destroy-on-close
    >
      <div class="search-container">
        <el-autocomplete
          v-model="searchName"
          :fetch-suggestions="querySearchAsync"
          placeholder="输入姓名"
          style="width: 250px; margin-right: 10px"
          @select="handleSelect"
          value-key="lastname"
        />
        <el-input
          v-model="searchNumber"
          placeholder="输入资产名称,例：主机"
          style="width: 250px; margin-right: 10px"
        />
        <el-button @click="handleSearch">搜索</el-button>
        <el-button @click="clearSearch">清空</el-button>
      </div>
      <el-table
        :data="gridData"
        height="450"
        style="width: 100%"
        ref="tableRef"
        v-loading="loading"
      >
        <el-table-column property="zcbhx" label="资产编号" width="100" />
        <el-table-column property="zcmc" label="资产名称" width="100" />
        <el-table-column property="lastname" label="管理人" width="100" />
        <el-table-column property="pp" label="品牌" width="100" />
        <el-table-column property="xh" label="型号" width="200" />
        <el-table-column property="bz" label="备注" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { getAssestList, searchUser } from "@/api/index";
import { ElMessage } from "element-plus";
const total = ref(0);
const emit = defineEmits(["close"]);
const gridData = ref([]);
const tableRef = ref(null);
const loading = ref(false);
const searchName = ref("");
const searchNumber = ref("");
const user_id = ref("0");
const props = defineProps({
  department_id: {
    type: String,
    default: "",
  },
  dialogTableVisible: {
    type: Boolean,
    default: false,
  },
  dialogZczt: {
    type: String,
    default: "",
  },
  dialogName: {
    type: String,
    default: "",
  },
  dialogZcxl: {
    type: String,
    default: "",
  },
});
function closeDialog() {
  emit("close");
  searchName.value = "";
  searchNumber.value = "";
  user_id.value = "0";
}
watch(
  () => props.dialogTableVisible,
  (newVal) => {
    if (newVal) {
      getList();
    }
  }
);
function querySearchAsync(queryString, cb) {
  if (!queryString) return cb([]);
  searchUser({
    page: 1,
    size: 100,
    keyword: queryString,
  }).then(({ data: res }) => {
    if (res.code == 0) {
      cb(res.data.list);
    }
  });
}
function handleSelect(item) {
  user_id.value = item.id;
}
function handleSearch() {
  if (user_id.value !== "0" || searchNumber.value) {
    handleSizeChange();
  } else {
    ElMessage("请输入搜索条件或者点击清空");
  }
}
function clearSearch() {
  searchName.value = "";
  searchNumber.value = "";
  user_id.value = "0";
  handleSizeChange();
}
function getList() {
  loading.value = true;
  getAssestList({
    page: 1,
    size: 1000,
    zczt: props.dialogZczt,
    user_id: user_id.value,
    keyword: searchNumber.value,
    department_id: props.department_id,
  }).then(({ data: res }) => {
    total.value = 0;
    if (res.code == 0) {
      if (props.dialogZcxl == "") {
        gridData.value = res.data.list;
        total.value = res.data.total;
      } else {
        gridData.value = res.data.list.filter((item) => {
          if (props.dialogZcxl == "1") {
            return item.zcxl == props.dialogZcxl;
          } else {
            return item.zcxl != "1";
          }
        });
      }
      loading.value = false;
    }
  });
}
function scrollToTop() {
  if (tableRef.value) {
    const firstRow = tableRef.value.$el.querySelector(
      ".el-table__body tr:first-child"
    );

    firstRow.scrollIntoView({ block: "start", inline: "nearest" });
  }
}
const handleSizeChange = () => {
  getList();
  scrollToTop();
};
</script>
<style>
.search-container {
  width: 100%;
  margin: 15px 0;
  display: flex;
}
.pagination {
  display: flex;
  margin-top: 15px;
  align-items: center;
  justify-content: end;
  .total-count {
    margin-right: 10px;
    font-size: 15px;
  }
}
</style>
<style scoped lang="less">
.dialog-container {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
